import { defineComponent, ref, onMounted } from 'vue'
import {
  NConfigProvider,
  NThemeEditor,
  NLoadingBarProvider,
  NMessageProvider,
  NDialogProvider,
  darkTheme,
  zhCN
} from 'naive-ui'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import type { GlobalThemeOverrides } from 'naive-ui'
import { themesStore } from '@/stores/modules/theme'
import LS from '@/utils/LocalStorage'
export default defineComponent({
  name: 'Root',
  setup() {
    hljs.registerLanguage('javascript', javascript)
    const isDark = ref(false)
    const themeOverrides: GlobalThemeOverrides = {}
    const theme = themesStore()
    const { setConfirmTheme } = theme
    onMounted(() => {
      if (LS.get('themeConfig')) {
        setConfirmTheme(LS.get('themeConfig'))
        document.documentElement.style.cssText = LS.get('themeConfigStyle')
      }
    })
    return () => (
      <>
        <NConfigProvider
          abstract={true}
          theme={isDark.value ? darkTheme : undefined}
          theme-overrides={themeOverrides}
          locale={zhCN}
          hljs={hljs}
        >
          <NThemeEditor>
            <NLoadingBarProvider>
              <NMessageProvider>
                <NDialogProvider>
                  <router-view />
                </NDialogProvider>
              </NMessageProvider>
            </NLoadingBarProvider>
          </NThemeEditor>
        </NConfigProvider>
      </>
    )
  }
})
